[EuiToolTip] Replace all title attributes with EuiToolTip by weronikaolejniczak · Pull Request #9643 · elastic/eui

weronikaolejniczak · 2026-05-07T15:02:30Z

Tip

Review the changes commit-by-commit. These changes need to be on the same PR so that I can easily test them in Kibana and to avoid possible conflicts when merging to main.

Summary

What:
- Replaced all title HTML attribute cases with EuiToolTip.
- Removed all cases of both browser tooltip and EuiToolTip displaying at once with duplicated content.
Why:
- Relates to [Tooltips] Remove or replace title HTML attribute #9566
- Closes [EuiBasicTable] NVDA duplicate announcements in selection + overflow actions (All actions tooltip) and verbose pagination aria-label #9524
How:
- Omitted EuiBetaBadge in favor of: https://github.com/elastic/eui-private/issues/695
- Omitted EuiBadge because tooltip is displayed both on the text and the icon button. The icon is a child of the content which would mean only the top-level tooltip gets triggered. If we use a browser tooltip for the content and EuiToolTip for the icon button it creates a weird experience where both can be displayed at once and cover each other.
- Omitted EuiButtonGroup because the browser tooltip is used for large labels that can be suppressed by passing title="" if needed.
- Omitted EuiListGroupItem because it already makes the best judgement when to show the title and when to show the tooltip.

Note

All remaining title attributes are ones that have to do with truncation. The effort and impact of conditionally rendering EuiToolTip is high but the value is low.

API Changes

N/A

Screenshots

`EuiAvatar` (Storybook)

Hover an avatar with a name prop to see the name as a tooltip.

Before	After

`EuiBasicTable` (Storybook)

Hover the select-all / row-select checkboxes, row action icons (especially disabled ones), and pagination arrows.

Remaining title: hover truncated column headers.

Before	After

`EuiBreadcrumbs` (Storybook)

Hover the breadcrumb that opens a popover (the one with a chevron icon).

Remaining title: hover a regular breadcrumb link.

Before	After

`EuiComboBox` (Storybook)

Hover an option that has a tooltip (see "With Tooltip" story). truncationProps story result comes from changes made to EuiTextTruncate.

Remaining title:

The pill in EuiComboBox is an EuiBadge for which we left the browser tooltips.
The "Default Truncation" story.

Before	After

`EuiDataGrid` (Storybook)

Hover the in-cell expand button.

The display and keyboard shortcuts toolbar buttons already had EuiToolTip. disableScreenReaderOutput was added to prevent duplicate SR announcements.

Before	After

`EuiAutoRefresh` (Storybook)

Hover the auto-refresh button. Tested with EuiSuperDatePicker.

`EuiSuperDatePicker` (Storybook)

Hover the start / end date display buttons, the invalid field after inputting from date, the submit (✓) button inside the absolute date tab when writing a date in the field, the quick-select (calendar) toggle button, and the auto-refresh button when isPaused is set to false.

Before	After

|

`EuiFieldPassword` (Storybook)

Hover the show / hide-password (eye) button next to the input.

Before	After

`EuiMarkdownEditor` (Storybook)

Hover the "Syntax help" button (M↓) in the editor footer.

Before	After

`EuiPagination` (Storybook)

Hover the previous / next (and first / last, when shown) arrow buttons. Tested with EuiBasicTable.

`EuiSearchBar` (Storybook)

Enter an invalid query to see the error message as a tooltip on the search input.

Before	After

`EuiSelectable` (Storybook)

Hover an option in the selectable list. No conflicting tooltips.

Remaining title: when tooltip or truncationProps are not provided.

Before	After

`EuiTextTruncate` (Storybook)

Hover the rendered text. Tooltip should appear only when the text is actually truncated.

Before	After

Impact Assessment

Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.

🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?
💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.
🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).
🔧 Hard to integrate — If changes require substantial updates to Kibana, please stage the changes and link them here.

Impact level: 🟡 Moderate
Kibana PR: elastic/kibana#268225

Release Readiness

Documentation:
Figma: {link to Figma or issue}
Migration guide: See "Impact assessment"
Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}

QA instructions for reviewer

Test these components in Storybook:

Checklist before marking Ready for Review

Filled out all sections above
QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
QA: Tested in CodeSandbox and Kibana
QA: Tested docs changes
Tests: Added/updated Jest, ~~Cypress~~, and VRT
Changelog: Added changelog entry
Breaking changes: Added breaking change label (if applicable)

Reviewer checklist

Approved Impact Assessment — Acceptable to merge given the consumer impact.
Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

Copilot

Pull request overview

This PR replaces a wide set of native HTML title attributes with EuiToolTip usages to standardize tooltip behavior and reduce duplicate/verbose screen reader announcements across EUI components. It also extends EuiToolTip’s display prop to support flex layouts.

Changes:

Replaced multiple title-based tooltips with EuiToolTip across core components (tables, pagination, breadcrumbs, date pickers, etc.)
Updated truncation behavior to use EuiToolTip + keyboard focus support (EuiTextTruncate)
Updated unit/Cypress tests and snapshots to reflect new tooltip DOM and a11y behavior, and added a new story variant for the Markdown editor

Reviewed changes

Copilot reviewed 68 out of 68 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/website/docs/components/display/avatar.mdx	Add accessibility guidance for avatar tooltips
packages/eui/src/components/tool_tip/tool_tip.tsx	Allow `display="flex"` on tooltip anchors
packages/eui/src/components/tool_tip/tool_tip.styles.ts	Add `flex` anchor display styling
packages/eui/src/components/timeline/snapshots/timeline.test.tsx.snap	Snapshot updates for avatar tooltip wrapper
packages/eui/src/components/timeline/snapshots/timeline_item.test.tsx.snap	Snapshot updates for avatar tooltip wrapper
packages/eui/src/components/text_truncate/text_truncate.tsx	Replace truncation `title` with `EuiToolTip` + tabindex
packages/eui/src/components/text_truncate/text_truncate.test.tsx	Add/adjust tooltip-related unit tests
packages/eui/src/components/text_truncate/text_truncate.spec.tsx	Update Cypress spec for tooltip/tabindex behavior
packages/eui/src/components/table/table_pagination/snapshots/table_pagination.test.tsx.snap	Snapshot updates for pagination tooltip wrappers
packages/eui/src/components/table/table_header_cell.test.tsx	Add assertion for header cell `title` behavior
packages/eui/src/components/selectable/selectable.spec.tsx	Cypress spec updates removing `title` assertions
packages/eui/src/components/selectable/selectable_list/selectable_list.tsx	Only set `title` when no tooltip/truncation props
packages/eui/src/components/search_bar/search_box.tsx	Preserve consumer `onFocus` while showing hint
packages/eui/src/components/search_bar/search_bar.tsx	Wrap search box with `EuiToolTip` for errors
packages/eui/src/components/search_bar/search_bar.test.tsx	Update tests away from `findByTitle`
packages/eui/src/components/search_bar/filters/field_value_selection_filter.spec.tsx	Cypress spec updates removing `title` selectors
packages/eui/src/components/search_bar/snapshots/search_bar.test.tsx.snap	Snapshot updates for tooltip wrapper markup
packages/eui/src/components/pagination/pagination_button_arrow.tsx	Replace pagination arrow `title` with `EuiToolTip`
packages/eui/src/components/pagination/snapshots/pagination.test.tsx.snap	Snapshot updates for pagination tooltip wrappers
packages/eui/src/components/markdown_editor/markdown_editor.stories.tsx	Add “NoPlugins” story variant
packages/eui/src/components/markdown_editor/markdown_editor_help_button.tsx	Replace/adjust help button tooltip behavior
packages/eui/src/components/markdown_editor/snapshots/markdown_editor.test.tsx.snap	Snapshot updates for tooltip wrapper IDs
packages/eui/src/components/header/header.a11y.tsx	Update selector away from `title`
packages/eui/src/components/form/field_password/field_password.tsx	Replace toggle button `title` with `EuiToolTip`
packages/eui/src/components/form/field_password/field_password.test.tsx	Update unit tests removing `title` expectations
packages/eui/src/components/form/field_password/snapshots/field_password.test.tsx.snap	Snapshot updates for tooltip wrappers
packages/eui/src/components/date_picker/super_date_picker/time_window_buttons.tsx	Remove explicit `title=""` suppression on buttons
packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx	Replace quick select button `title` with `EuiToolTip`
packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/snapshots/quick_select_popover.test.tsx.snap	Snapshot updates for tooltip wrapper markup
packages/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx	Replace date popover button `title` with `EuiToolTip`
packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx	Replace submit button `title` with `EuiToolTip`
packages/eui/src/components/date_picker/super_date_picker/date_popover/snapshots/date_popover_button.test.tsx.snap	Snapshot updates removing `title`
packages/eui/src/components/date_picker/super_date_picker/snapshots/time_window_buttons.test.tsx.snap	Snapshot updates showing returned `title` attrs
packages/eui/src/components/date_picker/super_date_picker/snapshots/super_date_picker.test.tsx.snap	Snapshot updates for tooltip wrapper markup
packages/eui/src/components/date_picker/auto_refresh/auto_refresh.tsx	Replace auto-refresh `title` with `EuiToolTip`
packages/eui/src/components/date_picker/auto_refresh/snapshots/auto_refresh.test.tsx.snap	Snapshot updates for tooltip wrapper markup
packages/eui/src/components/datagrid/data_grid.test.tsx	Update assertions away from `getByTitle`
packages/eui/src/components/datagrid/controls/keyboard_shortcuts.tsx	Disable SR output for toolbar tooltip
packages/eui/src/components/datagrid/controls/display_selector.tsx	Disable SR output for toolbar tooltip
packages/eui/src/components/datagrid/controls/data_grid_toolbar.stories.tsx	Disable SR output for story tooltip
packages/eui/src/components/datagrid/controls/column_sorting_draggable.test.tsx	Update tests away from `.title` usage
packages/eui/src/components/datagrid/controls/snapshots/keyboard_shortcuts.test.tsx.snap	Snapshot updates for tooltip wrapper IDs
packages/eui/src/components/datagrid/controls/snapshots/display_selector.test.tsx.snap	Snapshot updates for tooltip wrapper IDs
packages/eui/src/components/datagrid/body/cell/data_grid_cell_actions.tsx	Replace expand button `title` with `EuiToolTip` (flex)
packages/eui/src/components/datagrid/body/cell/data_grid_cell_actions.test.tsx	Update tests removing `title` expectations
packages/eui/src/components/datagrid/snapshots/data_grid.test.tsx.snap	Snapshot updates for pagination tooltip wrappers
packages/eui/src/components/comment_list/snapshots/comment.test.tsx.snap	Snapshot updates for avatar tooltip wrappers
packages/eui/src/components/comment_list/snapshots/comment_timeline.test.tsx.snap	Snapshot updates for avatar tooltip wrappers
packages/eui/src/components/comment_list/snapshots/comment_list.test.tsx.snap	Snapshot updates for avatar tooltip wrappers
packages/eui/src/components/comment_list/snapshots/comment_event.test.tsx.snap	Snapshot updates for avatar tooltip wrappers
packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx	Only set `title` for truncation-only cases
packages/eui/src/components/card/snapshots/card.test.tsx.snap	Snapshot updates for avatar tooltip wrappers
packages/eui/src/components/breadcrumbs/_breadcrumb_content.tsx	Replace breadcrumb popover `title` with `EuiToolTip`
packages/eui/src/components/breadcrumbs/snapshots/breadcrumbs.test.tsx.snap	Snapshot updates for breadcrumb tooltip wrappers
packages/eui/src/components/breadcrumbs/snapshots/breadcrumb.test.tsx.snap	Snapshot updates for breadcrumb tooltip wrappers
packages/eui/src/components/breadcrumbs/snapshots/_breadcrumb_content.test.tsx.snap	Snapshot updates for breadcrumb tooltip wrappers
packages/eui/src/components/basic_table/default_item_action.tsx	Remove disabled `title`, ensure aria-disabled handling
packages/eui/src/components/basic_table/collapsed_item_actions.tsx	Replace `title` with tooltip + aria-disabled
packages/eui/src/components/basic_table/basic_table.tsx	Replace checkbox titles with tooltips; minor a11y tweaks
packages/eui/src/components/basic_table/basic_table.test.tsx	Update disabled assertions to aria-disabled
packages/eui/src/components/basic_table/snapshots/pagination_bar.test.tsx.snap	Snapshot updates for pagination tooltip wrappers
packages/eui/src/components/basic_table/snapshots/in_memory_table.test.tsx.snap	Snapshot updates for checkbox/pagination tooltips
packages/eui/src/components/basic_table/snapshots/collapsed_item_actions.test.tsx.snap	Snapshot updates for tooltip wrapper IDs
packages/eui/src/components/basic_table/snapshots/basic_table.test.tsx.snap	Snapshot updates for checkbox/pagination tooltips
packages/eui/src/components/avatar/avatar.tsx	Replace avatar `title` with `EuiToolTip`
packages/eui/src/components/avatar/avatar.test.tsx	Add hover tooltip test
packages/eui/src/components/avatar/snapshots/avatar.test.tsx.snap	Snapshot updates for avatar tooltip wrapper markup
packages/eui/changelogs/upcoming/9643.md	Changelog entry for tooltip migration + flex display

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 65 out of 65 changed files in this pull request and generated 3 comments.

mgadewoll

I manually tested the listed components and almost everything works as expected. I found one small A11y regression:

EuiBreadcrumbs doesn't read the tooltip in NVDA

Screen.Recording.2026-05-21.at.11.05.08.mov

ℹ️ I smoke tested some codesandboxes but they load with @latest EUI not the PR state, hence we can't verify that the PR changes themselves work there as well.

elasticmachine · 2026-05-26T10:19:30Z

💚 Build Succeeded

Buildkite Build
Commit: 75d6f3e

History

💔 Build elastic/eui#6509 failed ff4c46c
💔 Build elastic/eui#6506 failed 22a9f6d
💔 Build elastic/eui#6489 failed 52651a4
💔 Build elastic/eui#6475 failed 7b26958
💔 Build elastic/eui#6429 failed 5a469df
💔 Build elastic/eui#6425 failed 7248bc2

cc @weronikaolejniczak

elasticmachine · 2026-05-26T10:25:51Z

💚 Build Succeeded

History

💚 Build elastic/eui#3560 succeeded ff4c46c
💚 Build elastic/eui#3555 succeeded 22a9f6d
💚 Build elastic/eui#3553 succeeded 556f497
💚 Build elastic/eui#3552 succeeded 9326328
💚 Build elastic/eui#3537 succeeded 52651a4
💚 Build elastic/eui#3521 succeeded 7b26958

cc @weronikaolejniczak

weronikaolejniczak · 2026-05-26T10:59:36Z

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

mgadewoll · 2026-05-26T11:52:26Z

          return (
            <EuiBreadcrumbPopover
              {...popoverButtonProps}
+              title={title}


Tiny tiny nit, non-blocking: we don't need to add title here, it's already included in popoverButtonProps.

mgadewoll

🟢 Changes are LGTM and working correctly. Thanks for the detailed overview and reports as well as the additional updates! I retested the last updated components, everything works as expected. 🎉

weronikaolejniczak · 2026-05-26T11:59:09Z

❗ Not merging until this week's release is tagged.

weronikaolejniczak self-assigned this May 7, 2026

weronikaolejniczak force-pushed the feat/replace-title branch 3 times, most recently from 0ad67e1 to 5a469df Compare May 8, 2026 10:22

weronikaolejniczak mentioned this pull request May 12, 2026

[EuiBasicTable] NVDA duplicate announcements in selection + overflow actions (All actions tooltip) and verbose pagination aria-label #9524

Closed

weronikaolejniczak force-pushed the feat/replace-title branch 5 times, most recently from 556f497 to 40b8e10 Compare May 18, 2026 19:54

weronikaolejniczak added 12 commits May 18, 2026 21:55

feat(eui): replace title with EuiToolTip in EuiAvatar

bc8cf0c

feat(eui): replace title with EuiToolTip in EuiBasicTable

0c6a960

feat(eui): replace title with EuiToolTip in EuiBreadcrumbs

7735270

feat(eui): pass title conditionally in EuiComboBox

ade66fa

feat(eui): replace title with EuiToolTip in EuiMarkdownEditor

ac6586e

feat(eui): replace title with EuiToolTip in EuiFieldPassword

ecd0c78

feat(eui): pass title conditionally in EuiSelectable

000489e

feat(eui): replace title with EuiToolTip in EuiTextTruncate

1b200f8

feat(eui): replace title with EuiToolTip in EuiSearchBar

a1a9c45

feat(eui): replace title with EuiToolTip in EuiSuperDatePicker

fa73855

feat(eui): replace title with EuiToolTip in EuiDataGrid

c5e0a7f

chore: add changelog

22a9f6d

weronikaolejniczak force-pushed the feat/replace-title branch from 40b8e10 to 22a9f6d Compare May 18, 2026 19:55

weronikaolejniczak marked this pull request as ready for review May 18, 2026 19:55

weronikaolejniczak requested a review from a team as a code owner May 18, 2026 19:55

Copilot AI review requested due to automatic review settings May 18, 2026 19:55

Copilot started reviewing on behalf of weronikaolejniczak May 18, 2026 19:55 View session

Copilot AI reviewed May 18, 2026

View reviewed changes

weronikaolejniczak added 2 commits May 19, 2026 15:31

fix(eui): add title="" back to time window buttons

066694b

fix(eui): disable screen reader output in date popover button

2d306da

weronikaolejniczak added 4 commits May 19, 2026 15:33

refactor(eui): render EuiToolTip conditionally in EuiSearchBar

626b143

fix(website): improve grammar

473306f

chore(eui): update selector in EuiSearchBar Cypress suite

f7d3755

chore: update snapshots

ff4c46c

weronikaolejniczak requested a review from Copilot May 20, 2026 09:21

Copilot started reviewing on behalf of weronikaolejniczak May 20, 2026 09:21 View session

Copilot AI reviewed May 20, 2026

View reviewed changes

Comment thread packages/eui/src/components/text_truncate/text_truncate.tsx

Comment thread packages/eui/src/components/search_bar/search_bar.tsx Outdated

Comment thread packages/website/docs/components/display/avatar.mdx

Copilot AI mentioned this pull request May 20, 2026

[WIP] Fix code according to review comment suggestions #9668

Closed

mgadewoll self-requested a review May 21, 2026 08:22

mgadewoll reviewed May 21, 2026

View reviewed changes

weronikaolejniczak mentioned this pull request May 26, 2026

[EuiToolTip] Replace all title attributes with EuiToolTip elastic/kibana#268225

Closed

8 tasks

weronikaolejniczak and others added 2 commits May 26, 2026 12:08

fix(eui): address PR feedback

9c74f5e

Merge branch 'main' into feat/replace-title

75d6f3e

weronikaolejniczak requested review from Copilot and mgadewoll May 26, 2026 11:00

Copilot AI reviewed May 26, 2026

View reviewed changes

mgadewoll reviewed May 26, 2026

View reviewed changes

mgadewoll approved these changes May 26, 2026

View reviewed changes

Copilot started reviewing on behalf of weronikaolejniczak May 26, 2026 12:19 View session

weronikaolejniczak merged commit b9bb26e into elastic:main May 27, 2026
5 checks passed

weronikaolejniczak mentioned this pull request May 27, 2026

[Epic] [Component sweep] Tooltips: EuiToolTip #9440

Open

23 tasks

Conversation

weronikaolejniczak commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

API Changes

Screenshots

EuiAvatar (Storybook)

EuiBasicTable (Storybook)

EuiBreadcrumbs (Storybook)

EuiComboBox (Storybook)

EuiDataGrid (Storybook)

EuiAutoRefresh (Storybook)

EuiSuperDatePicker (Storybook)

EuiFieldPassword (Storybook)

EuiMarkdownEditor (Storybook)

EuiPagination (Storybook)

EuiSearchBar (Storybook)

EuiSelectable (Storybook)

EuiTextTruncate (Storybook)

Impact Assessment

Release Readiness

QA instructions for reviewer

Checklist before marking Ready for Review

Reviewer checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented May 26, 2026

💚 Build Succeeded

History

Uh oh!

elasticmachine commented May 26, 2026

💚 Build Succeeded

History

Uh oh!

weronikaolejniczak commented May 26, 2026

Testing notes

EuiTextTruncate (Storybook, Docs)

EuiSearchBar (Storybook, Docs)

EuiBreadcrumbs (Storybook, Docs)

EuiAvatar (Storybook, Docs) / EuiComment (Storybook, Docs)

EuiSuperDatePicker (Storybook, Docs)

EuiComboBox (Storybook, Docs)

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

mgadewoll May 26, 2026

Choose a reason for hiding this comment

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak commented May 7, 2026 •

edited

Loading

`EuiAvatar` (Storybook)

`EuiBasicTable` (Storybook)

`EuiBreadcrumbs` (Storybook)

`EuiComboBox` (Storybook)

`EuiDataGrid` (Storybook)

`EuiAutoRefresh` (Storybook)

`EuiSuperDatePicker` (Storybook)

`EuiFieldPassword` (Storybook)

`EuiMarkdownEditor` (Storybook)

`EuiPagination` (Storybook)

`EuiSearchBar` (Storybook)

`EuiSelectable` (Storybook)

`EuiTextTruncate` (Storybook)

`EuiTextTruncate` (Storybook, Docs)

`EuiSearchBar` (Storybook, Docs)

`EuiBreadcrumbs` (Storybook, Docs)

`EuiAvatar` (Storybook, Docs) / `EuiComment` (Storybook, Docs)

`EuiSuperDatePicker` (Storybook, Docs)

`EuiComboBox` (Storybook, Docs)